{% extends 'common/layout.html' %}

{% block content %}

    <div style="background-color: #F3F4F6;border-radius: 10px ;width: 80%;margin: 0 auto;margin-top: 20px;height: 800px">
        <!-- 商品详情 -->
        <div style="display: flex;">
            <img src="{{ good.images.url }}" width="400px" height="400px"
                 style="margin-left: 200px;margin-top: 50px;border-radius: 30px;">
            <div style="flex-direction: column;margin-top: 50px;margin-left: 30px;line-height: 2;">
                <h1>描述：{{ good.description }}</h1>
                <h1>价格：{{ good.price }}</h1>
                <h1>评分：{{ good.rating }}</h1>
                <div style="display: flex">
                    <input id="rating_input" type="number" lay-affix="number" placeholder="评分(1-5)" step="0.01"
                           lay-precision="2"
                           class="layui-input"
                           style="border-color: #E91E63;border-width: 3px;border-radius: 10px;width: 100px;">
                    <button id="submit_rating" class="layui-btn layui-btn-normal" style="margin-left: 20px;">提交评分
                    </button>
                </div>
                <button id="submit_shopping" class="layui-btn"
                        style="margin-top: 20px;border-radius: 10px;width: 220px">加入收藏
                </button>
            </div>
        </div>
        <!-- 相似商品 -->
        <div style="margin: 30px">
            <h1>相似商品推荐</h1>
            <!-- 使用 CSS Grid 布局 -->
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px; border-radius: 10px;">
                {% for item in similar_goods %}
                    <div style="padding: 10px; background-color: white; border-radius: 10px;">
                        <img src="{{ item.images.url }}" width="150px" height="150px">
                        <h1 style="text-align: center; font-size: 24px;">{{ item.name }}</h1>
                        <h2 style="text-align: center; font-size: 18px; color: #EC4899FF">￥{{ item.price }}</h2>
                        <button id="search_button" class="layui-btn layui-bg-blue" style="width: 100%;">
                            <a href="{% url 'content:商品详情' %}?id={{ item.id }}"
                            style="text-decoration: none; color: inherit;">查看详情</a>
                        </button>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>


{% endblock %}
{% block js %}
    <script>
        layui.use(function () {
            var $ = layui.jquery;
            $('#submit_rating').on('click', function () {
                var rating = $('#rating_input').val();
                if (rating === '') {
                    layer.msg('请输入评分');
                    return;
                }
                if (rating < 1 || rating > 5) {
                    layer.msg('请输入1到5之间的评分');
                    return;
                }

                data = {
                    'rating': rating,
                    'good_id': '{{ good.id }}'
                }
                $.ajax({
                    url: '{% url 'content:商品详情' %}',
                    type: 'POST',
                    data: JSON.stringify(data),
                    success: function (data) {
                        if (data === '200') {
                            layer.msg('评分成功');
                        } else {
                            layer.msg('评分已提交,请勿重复提交');
                        }
                    }

                });
            });
            $('#submit_shopping').on('click', function () {

                $.ajax({
                    url: '{% url 'content:加入收藏' %}?id={{ good.id }}',
                    type: 'get',
                    success: function (data) {
                        if (data === '200') {
                            layer.msg('成功加入收藏');
                        } else {
                            layer.msg('已加入收藏,请勿重复提交');
                        }
                    }
                });
            });

        })

    </script>
{% endblock %}




